/*Chloe Yu 2018*/
html, body { height: 100%; width:100%; padding: 0; margin: 0; }

div { 
	width: 100%; 
	height: 100%;
}

/*background image*/
body {	
  /*background-image: url("../img/cloud2.jpeg");*/
  background-color: #F4F4F4;
  /*background-color: black;*/
  background-size: cover;
  background-attachment: fixed;
  background-position: center; 
	margin: 0;
 	padding: 0;
  min-width: 1024px;
  min-height: 640px;
}

/*-----------------------------------navigation bar----------------------------------*/

.nav{
  z-index: 999;
  list-style: none;
  position: fixed;
  width: 99%;
  height: 80px;
  text-align:center;
  padding-left:0px;
  /*background-color: black;*/
}
.nav li{
  display: inline-block;
  text-align: center;
  padding-top: 30px;
  font-size: 15px;
  padding-right: 10px;
}

.nav li a{
  margin: 10px 15px;
  padding: 5px 0px;
  color: black;
  text-transform: uppercase;
  font-weight: bold;
  font-family: 'Khand';
  font-size: 25px;
  letter-spacing: 2px;
}

.nav li a:hover{
  border-bottom: 3px solid black;
}

a {
    color: black;
    text-decoration: none;
}


/*----------------------------------------about page---------------------------------------*/
.aboutcenter{
  margin: 0 auto;
  position: relative;
  opacity: 1;
  width: 1200px;
  height: 0;
  top:100px;
  border-top: 1px solid grey;
}

/*.ga1{
  position: absolute;
  display: inline-block;
  top:530px;
  left: 280px;
  font-family: 'Khand';
  font-family: 'Abel';
  font-size: 25px;
  letter-spacing:2px;
}*/
.ga2{
  position: absolute;
  display: inline-block;
  top:520px;
  left: 400px;
  font-family: 'Abel';
  font-size: 22px;
  z-index: 998;
  letter-spacing:2px;
}
@-webkit-keyframes spaceboots {
  0% { -webkit-transform: translate(2px, 1px) rotate(0deg); }
  10% { -webkit-transform: translate(-1px, -2px) rotate(-1deg); }
  20% { -webkit-transform: translate(-3px, 0px) rotate(1deg); }
  30% { -webkit-transform: translate(0px, 2px) rotate(0deg); }
  40% { -webkit-transform: translate(1px, -1px) rotate(1deg); }
  50% { -webkit-transform: translate(-1px, 2px) rotate(-1deg); }
  60% { -webkit-transform: translate(-3px, 1px) rotate(0deg); }
  70% { -webkit-transform: translate(2px, 1px) rotate(-1deg); }
  80% { -webkit-transform: translate(-1px, -1px) rotate(1deg); }
  90% { -webkit-transform: translate(2px, 2px) rotate(0deg); }
  100% { -webkit-transform: translate(1px, -2px) rotate(-1deg); }
}
.ga2:hover,
.ga2:focus {
  -webkit-animation-name: spaceboots;
  -webkit-animation-duration: 0.8s;
  -webkit-transform-origin:50% 50%;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
}

.aboutimg{
  position: absolute;
  display: inline-block;
  width: 600px;
  margin-left: 150px;
  /*margin-top: 20px;*/
  margin-top: 2%;
}
.aboutimg img{
  width: 100%;
  height: auto; 
}

.abouttext{
  padding: 0px 20px;
  background-color: rgba(255,255,255,0.8);
  position: absolute;
  display: inline-block;
  width: 360px;
  height: auto;
  margin-left: 53%;
  /*margin-top: 140px;*/
  margin-top: 8%;
}

.aboutword{
  font-size: 1.1em;
  word-spacing:2px;
  line-height: 140%;
  /*color: #7d4627;*/
  /*color: #19646C;*/
  font-family: 'Abel';
  font-size: 22px;
}
.abouticon{
  position: absolute;
  display: inline-block;
  width: 130px;
  height: 30px;
  margin-left: 70%;
  margin-top: 50%;
}

.abouticon a{
  padding-left: 10%; 
  font-size: 1.5em;
  opacity: 0.7;
}
.abouticon a:hover{
  opacity: 1;
}